<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="js/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="js/layui/layui.js"></script>
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
    <title>My Admin - is a responsive admin template</title>
    <!-- Bootstrap Core CSS -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- Menu CSS -->
    <link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet"/>
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>
阿三发射点广东佛山
    <!-- Preloader -->
    <div class="preloader">
        <div class="cssload-speeding-wheel"></div>
    </div>
    <div id="wrapper">
        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
            <div class="navbar-header"> <a class="navbar-toggle hidden-sm hidden-md hidden-lg " href="javascript:void(0)" data-toggle="collapse" data-target=".navbar-collapse"><i class="ti-menu"></i></a>
                <div class="top-left-part"><a class="logo" href="dashboard.html"><i class="glyphicon glyphicon-fire"></i>&nbsp;<span class="hidden-xs">My Admin</span></a></div>
                <ul class="nav navbar-top-links navbar-left hidden-xs">
                    <li><a href="javascript:void(0)" class="open-close hidden-xs hidden-lg waves-effect waves-light"><i class="ti-arrow-circle-left ti-menu"></i></a></li>
                </ul>
                <ul class="nav navbar-top-links navbar-right pull-right">
                    <li>
                        <form role="search" class="app-search hidden-xs">
                            <input type="text" placeholder="Search..." class="form-control">
                            <a href=""><i class="ti-search"></i></a>
                        </form>
                    </li>
                    <li>
                        <a class="profile-pic" href="#"> <img src="images/users/hritik.jpg" alt="user-img" width="36" class="img-circle"><b class="hidden-xs">Maruti</b> </a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-header -->
            <!-- /.navbar-top-links -->
            <!-- /.navbar-static-side -->
        </nav>
        <div class="navbar-default sidebar nicescroll" role="navigation">
            <div class="sidebar-nav navbar-collapse ">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search hidden-sm hidden-md hidden-lg">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"><i class="ti-search"></i> </button>
                            </span>
                        </div>
                    </li>
                    <li>
                        <a href="dashboard.html" class="waves-effect"><i class="glyphicon glyphicon-fire fa-fw"></i> Dashboard</a>
                    </li>
                    <li>
                        <a href="profile.html" class="waves-effect"><i class="ti-user fa-fw"></i>商品管理</a>
                    </li>
                    <li>
                        <a href="basic-table.html" class="waves-effect"><i class="ti-layout fa-fw"></i>Basic-Table</a>
                    </li>
                    <li>
                        <a href="themifyicon.html" class="waves-effect"><i class="ti-face-smile fa-fw"></i> Icons</a>
                    </li>
                    <li>
                        <a href="map-google.html" class="waves-effect"><i class="ti-location-pin fa-fw"></i> Google Map</a>
                    </li>
                    <li>
                        <a href="blank.html" class="waves-effect"><i class="ti-files fa-fw"></i> Blank Page</a>
                    </li>
                    <li>
                        <a href="404.html" class="waves-effect"><i class="ti-info fa-fw"></i> Error 404</a>
                    </li>
                </ul>
                <div class="center p-20">
                    <span class="hide-menu"><a href="#"  class="btn btn-info btn-block btn-rounded waves-effect waves-light">Upgrade to Pro</a></span>
                </div>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.sidebar-collapse -->
    </div>
    <!-- Page Content -->
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row bg-title">
                <div class="col-lg-12">
                    
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <div style="" id="tb">
              <form>
                  	 商品名称:<input type="text" name="pname" id="pname"/>
                 	 售出价格：<input type="text" name="lowerprice" id="lowerprice"/>~
           			<input type="text" name="highPrice"  onblur="chenkprice()" id="highPrice"/>
                	 商品类别：<select id="cateId"  onfocus="loadcate()">
         					<option value="0">--请选择--</option>
      						</select>
      				<input type="button" value="检索" onclick="searchBtn()"/>
      				<input type="button" value="添加" onclick="addProductbtn()"/>
                 </form>
               </div>
           <!-- table表格显示 -->
           <table class="layui-hide" id="test" lay-filter="test"></table>
           <script type="text/html" id="barDemo">
  				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
 				 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	       </script>
	       <script>
	       var tableObj;
	     //加载类别
	     function loadcate(){
	    	 $.post("../selAllProductCate",{},function(res){
	    		 for(var i=0;i<res.length;i++){
	    			 $("#cateId").append("<option value='"+res[i].id+"'>"+res[i].cName+"</option>");
	    			 $("#cc").append("<option value='"+res[i].id+"'>"+res[i].cName+"</option>");
				}
	    	 },"json");
	     }
           function chenkprice(){
        	   var lowerprice=$("#lowerprice").val();
	    	   var highPrice=$("#highPrice").val();
	    	   if(lowerprice>highPrice){
	    		   $("#lowerprice").val("");
	    		   $("#highPrice").val("");
	    		   layer.alert("前面的价格不能高于后面的价格");
	    	   }
           }
           
	       function searchBtn(){
	    	   var pname=$("#pname").val();//alert(pname);
	    	   var lowerprice=$("#lowerprice").val();
	    	   var highPrice=$("#highPrice").val();
	    	   var cateId=$("#cateId option:selected").val();//alert(cateId);
	    	   
	    	  layui.use('table', function(){
	    		   var table = layui.table;
	    		   
	    		   tableObj = table.render({
	    		     elem: '#test'
	    		     ,url:'../queryProductData'
    		    	 ,where:{
    			    	 pname:pname,
    			    	 lowerprice:lowerprice,
    			    	 highPrice:highPrice,
    			    	 cateId:cateId
    			     }
	    		     ,title: '商品列表'
	    		     ,cols: [[
	    		       {type: 'checkbox', fixed: 'left'}
	    		       ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true}
	    		       ,{field:'pname', title:'商品名称', width:120, edit: 'text'}
	    		       ,{field:'categoryid', title:'商品类别', width:150, edit: 'text',templet:function(d){
	    		    	  return d.productCate.cName; 
	    		       }}
	    		       ,{field:'sellPrice', title:'售价', width:80, edit: 'text'}
	    		       ,{field:'discountPrice', title:'折扣价', width:100}
	    		       ,{field:'brand', title:'品牌'}
	    		       ,{field:'size', title:'尺码', width:80}
	    		       ,{field:'type', title:'类型', width:120}
	    		       ,{field:'factory', title:'工厂', width:100}
	    		       ,{field:'area', title:'地区', width:120}
	    		       ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:300}
	    		     ]]
	    		     ,page: true
	    		   });
	    		   
	    		   
	    		   //监听行工具事件
	    		   table.on('tool(test)', function(obj){
	    		     var data = obj.data;
	    		     //console.log(obj)
	    		     if(obj.event === 'del'){
	    		       layer.confirm('真的删除行么', function(index){
	    		         obj.del();
	    		         layer.close(index);
	    		       });
	    		     } else if(obj.event === 'edit'){
	    		       layer.prompt({
	    		         formType: 2
	    		         ,value: data.email
	    		       }, function(value, index){
	    		         obj.update({
	    		           email: value
	    		         });
	    		         layer.close(index);
	    		       });
	    		     }
	    		   });
	    		 }); 
	       }
//点击添加按钮
var index;
function addProductbtn(){
	layui.use("layer",function(){
		var layer = layui.layer;
		index = layer.open({
			type:1
			,title:"商品添加",
			content:$("#addproductwin")
			,area:["600px","350px"]
	})
	})
	
}
//点击添加保存
function addsaveproductbtn(){
	var prname = $("#proname").val();
	var cid = $("#cc option:selected").val();
	var sellprice = $("#sellprice").val();
	var discount = $("#discount option:selected").val();
	$.post("../insertPro",{
		pname:prname,
		categoryid:cid,
		sellPrice:sellprice,
		discountPrice:discount*sellprice
	},function(res){
		if(res.success){
			layer.msg(res.message);
		}
	},"json");
}
</script>


<!--添加窗体  -->
<div  id="addproductwin" style="display:none">
   <form >
      商品名称：<input type="text" id="proname"  name="pname"/><br/>
      商品类别:商品类别：<select id="cc"  onfocus="loadcate()">
         		<option value="0">--请选择--</option>
      			</select><br/>
   商品价格：<input type="text" id="sellprice" name="sellprice"/><br>
   折扣：<select id="discount">
     <option value="1">原价</option>
     <option value="0.9">九折</option>
     <option value="0.8">八折</option>
    </select><br>
   <input type="button" onclick="addsaveproductbtn()" value="添加"/> 
   </form>

</div>
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /#page-wrapper -->
    <footer class="footer text-center"> 云景项目 </footer>
    </div>
    <!-- /#wrapper -->
    <!-- jQuery -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Menu Plugin JavaScript -->
    <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
    <!--Nice scroll JavaScript -->
    <script src="js/jquery.nicescroll.js"></script>
    <!--Wave Effects -->
    <script src="js/waves.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="js/myadmin.js"></script>
</body>

</html>
